<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Edge.js (with full IE 6/7 support)</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="Content-language" content="en">
	<link rel="bookmark" type="text/html" title="Edge.js" href="http://www.netzgesta.de/edge/">
	<meta name="Author" lang="en" content="edge.netzgesta.de - Christian Effenberger">
	<meta name="Publisher" lang="en" content="www.netzgesta.de">
	<meta name="Copyright" lang="en" content="www.netzgesta.de - Christian Effenberger">
	<meta name="Generator" lang="en" content="Christian Effenberger">
	<meta name="Description" lang="en" content="Edge.js 1.4 allows you to add individual masks (inc. inbuilt mask) to images on your webpages through unobtrusive javascript">
	<meta name="Keywords" lang="en" content="edge.js,images,effect,alpha,mask,edges,unobtrusive javascript,Mozilla,Firefox,Opera,Safari">
	<meta http-equiv="imagetoolbar" content="no">
	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<script type="text/javascript">
<!--
// mask images referenced by number
var mask2load = new Array();
mask2load[0] = "masks/8bit/crippleedge.png";
mask2load[1] = "masks/8bit/frizzedge.png";
mask2load[2] = "masks/8bit/softedge.png";
mask2load[3] = "masks/8bit/splatteredge.png";
mask2load[4] = "masks/8bit/waveedge.png";
mask2load[5] = "images/textedge.png";
mask2load[6] = "images/glowedge.png";
mask2load[7] = "images/textedge.gif";
mask2load[8] = "images/glowedge.gif";
mask2load[9] = "masks/2bit/crippleedge.gif";
mask2load[10] = "masks/2bit/frizzedge.gif";
mask2load[11] = "masks/2bit/softedge.gif";
mask2load[12] = "masks/2bit/splatteredge.gif";
mask2load[13] = "masks/2bit/waveedge.gif";
-->
	</script>
	<script type="text/javascript" src="edge.js"></script>
	<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
a { color: blue; font-style:italic; text-decoration:none; }
tt {color: green;}
b {color: #993333;}
body { background: url(images/backgrnd.jpg) silver; color: black; font-family: Georgia,serif; line-height: 1.5; margin: 2em 2em;}
h2 { line-height: 1; }
.demo { float: left; padding: 10px; }
.logo { position: relative; width: 400px; height: 120px; white-space: nowrap;}
#guru { padding: 4px; width: 99%; height: auto; text-align: center; background-color: black; }
#guru div { border: solid 3px red; padding: 4px; font-family: monospace; font-size: 1.25em; width: auto; height: auto; color: red; text-align: center; text-decoration: blink; }
#header { margin-bottom: 0; font-weight: normal; font-style: italic; color: gray; }
.bookmarks { white-space: nowrap; width: 98%; margin: 0; padding-top: 10px; border-top: 1px dotted gray;}
</style>
</head>
<body><noscript><div id="guru" title="By this you can recognize the Amiga fan!"><div><strong>Guru Meditation</strong> - With deactivated JavaScript: Images stay unmodified!</div></div></noscript>
<table>
<tr><td valign="top" style="padding-top: 0.5em">
<div class="logo"><a class="nop" href="edge.zip" title="download edge.js">
<img style="position: absolute; left: 0; top: 0; z-index: 0;" src="images/glow.gif" class="edges imask6" width="400" height="120" border="0" alt="edge">
<img style="position: absolute; left: 0; top: 0; z-index: 1;" src="images/edge.jpg" class="edges imask5" width="400" height="120" border="0" alt="edge">
</a></div>
</td>
<td style="padding: 0 0 0 15px; margin: 0; line-height: 1.5; font-style: italic;">
<p><strong>Edge.js 1.4</strong> allows you to add individual masks (inc. inbuilt mask) to images on your webpages. It uses unobtrusive javascript to keep your code clean.</p>
<p>It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.</p>
</td></tr>
</table>

<h2>Demonstration</h2>

<p style="clear: left">Shows some of the things "edge.js" does.<small><br>
<br>First 5 images with class = "<tt>edges imaskN</tt>" the two other images with class = "<tt>edges inbuilt</tt>"...</small></p>
<div class="demo">
<img class="edges imask1" src="images/girl.jpg" width="400" height="400" border="0" title="onClick event - mask: frizzedge" onClick="alert('Image dimension '+this.width+'x'+this.height);" alt="">
</div><div class="demo">
<img class="edges imask2" src="images/girl.jpg" width="160" height="160" border="0" title="onClick event - mask: softedge" onClick="alert('ALT=\''+this.alt+'\'');" alt="beautiful girl">
<br><img class="edges imask3" src="images/girl.jpg" width="120" height="120" border="0" title="onClick event - mask: splatteredge" onClick="alert('ID='+this.id);" alt="" id="girl_image">
<br><img class="edges imask4" src="images/girl.jpg" width="80" height="80" border="0" title="tooltip support - mask: waveedge" alt="">
</div><p style="clear: left;"></p>
<div class="demo">
<map name="gmap">
    <area shape="rect" coords="11,10,59,29" href="http://www.koblenz.de/" alt="Koblenz">
    <area shape="rect" coords="42,36,96,57" href="http://www.wiesbaden.de/" alt="Wiesbaden">
    <area shape="rect" coords="42,59,78,80" href="http://www.mainz.de/" alt="Mainz">
    <area shape="rect" coords="100,26,152,58" href="http://www.frankfurt.de/" alt="Frankfurt">
    <area shape="rect" coords="27,113,93,134" href="http://www.mannheim.de/" alt="Mannheim">
    <area shape="rect" coords="100,138,163,159" href="http://www.heidelberg.de/" alt="Heidelberg">
    <area shape="rect" coords="207,77,266,101" href="http://www.wuerzburg.de/" alt="W&uuml;rzburg">
    <area shape="rect" coords="282,62,344,85" href="http://www.bamberg.de/" alt="Bamberg">
    <area shape="rect" coords="255,132,316,150" href="http://www.nuernberg.de/" alt="N&uuml;rnberg">
    <area shape="rect" coords="78,182,132,200" href="http://www.karlsruhe.de/" alt="Karlsruhe">
    <area shape="rect" coords="142,169,200,193" href="http://www.heilbronn.de/" alt="Heilbronn">
    <area shape="rect" coords="140,209,198,230" href="http://www.stuttgart.de/" alt="Stuttgart">
    <area shape="rect" coords="187,263,222,281" href="http://www.ulm.de/" alt="Ulm">
    <area shape="rect" coords="249,278,304,297" href="http://www.augsburg.de/" alt="Augsburg">
    <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310" href="http://www.baden-aktuell.de/" alt="Baden">
</map>
<img class="edges" src="images/karte.png" width="345" height="312" title="mask: crippleedge" alt="map" border="0" usemap="#gmap">
</div><div class="demo">
<img class="edges inbuilt" src="images/example.jpg" width="225" height="150" border="0" title="inbuilt masking" alt="">&nbsp;
<br><img class="edges inbuilt isize8" src="images/example.jpg" width="225" height="150" border="0" title="inbuilt masking with size 8px" alt="">
</div><p style="clear: left;"></p>

<h2>Setting Up</h2>

<p>Download "edge.js" and include it into your webpage.</p>
<code>// only if you want to use mask images instead of the inbuilt
<br>&lt;script type="text/javascript"&gt;
<br>var mask2load = new Array();
<br>mask2load[0] = "<tt>masks/8bit/crippleedge.png</tt>";
<br>mask2load[1] = "<tt>masks/8bit/frizzedge.png</tt>";
<br>mask2load[2] = "<tt>masks/8bit/softedge.png</tt>";
<br>// if you want IE to use mask images: add GIF versions
<br>// of the same name to the array (edge.js will find them)
<br>mask2load[3] = "<tt>masks/2bit/crippleedge.gif</tt>";
<br>mask2load[4] = "<tt>masks/2bit/frizzedge.gif</tt>";
<br>mask2load[5] = "<tt>masks/2bit/softedge.gif</tt>";
<br>&lt;/script&gt;
<br>// else only this line... 
<br>&lt;script type="text/javascript" src="<tt>edge.js</tt>"&gt;&lt;/script&gt;
</code>

<h2>Using It</h2>

<p style="clear: left;">To get the masked picture edges just add a class="<tt>edges</tt>" to the image.</p>
<div class="demo">
<small>You'll find a few provided mask images
<br>in low (2bit GIF format) "<tt>masks/2bit/</tt>" quality (required by IE)
<br>and high (8bit PNG format) "<tt>masks/8bit/</tt>" quality.</small><br>
<img src="images/softedge.jpg" width="80" height="80" border="0" title="mask: softedge" alt="softedge">
<img src="images/crippleedge.jpg" width="80" height="80" border="0" title="mask: crippleedge" alt="crippleedge">
<img src="images/frizzedge.jpg" width="80" height="80" border="0" title="mask: frizzedge" alt="frizzedge">
<img src="images/splatteredge.jpg" width="80" height="80" border="0" title="mask: splatteredge" alt="splatteredge">
<img src="images/waveedge.jpg" width="80" height="80" border="0" title="mask: waveedge" alt="waveedge">
<br><small>Create your own mask images for individual edge effects.</small>
</div>
<p style="clear: left;"></p>

<h2>Classes</h2>

<ul>
<li>Initialisation class "<tt>edges</tt>"</li>
<li><small><em>vary the mask by adding imask followed by the maskimage <b>number</b>:</em></small><br>
Mask image class "<tt>imask</tt>" - min=0 max=NumberOfLoadedMasks default=0</li>
<li><small><em>fallback mask creates soft edges without any external resource image:</em></small><br>
Fallback class "<tt>inbuilt</tt>"</li>
<li><small><em>vary the size of the fallback mask by adding isize followed by the desired <b>size</b> in pixel:</em></small><br>
Edge size class "<tt>isize</tt>" - min=0 max=HalfOfImageDimension default=10% of the picture dimension.</li>
</ul>

<h2>Scripting lib</h2>

<p>If you want flexibility, use "<b>cvi_edge_lib.js</b>" instead of "<b>edge.js</b>". 
You can make your images respond to user actions (e.g. changing one or more options when the image is hovered over).</p>
<dl>
	<dt><strong>Set</strong> defaults using Javascript</dt>
	<dd>
		<code>
		cvi_edge.defaultMask = 0; <tt>//INT 0-n (mask number)</tt><br>
		cvi_edge.defaultInbuilt = false; <tt>//BOOLEAN</tt> (inbuilt options below)<br>
		cvi_edge.defaultType = 'frame';  <tt>//STR  'f|l|r'-'frame|linear|radial'</tt><br>
		cvi_edge.defaultAngle = 0; <tt>//INT  0|90|180|270 (degree) [linear only]</tt><br>
		cvi_edge.defaultSize = 20; <tt>//INT 1-200 (px) [frame only]</tt><br>
		</code>
		<strong>If</strong> <b>cvi_filter_lib.js</b> is loaded also...<br>
		<code>
		cvi_edge.defaultFilter = null; <tt>//OBJ  [{f='grayscale'},{f='emboss', s:1}...]</tt>
		</code>
  		<p></p>
	</dd>
	<dt><strong>Add</strong> images using Javascript</dt>
  	<dd>
  		<code>cvi_edge.add(<tt>image</tt>, <tt>options</tt>);</code><br><small>
		<tt>image</tt> should be an image element: document.getElementById(<b>"myimg"</b>)<br>
		<tt>options</tt> can contain one or more values: {<tt>mask</tt>: <b>value</b>, <tt>inbuilt</tt>: <b>value</b>, <tt>type</tt>: <b>value</b>, <tt>angle</tt>: <b>value</b>, <tt>size</tt>: <b>value</b>, <tt>filter</tt>: <b>value</b>}</small>
		<dl><dt>Examples:</dt>
		<dd>
			<code>
			cvi_edge.add(document.getElementById(<b>"myimg"</b>), { <tt>mask</tt>: <b>2</b> });<br>
			&lt;img onLoad="cvi_edge.add(<b>this</b>, {<tt>mask</tt>: <b>2</b> });" ...&gt;
			</code>
  		</dd></dl>
  		<p></p>
  	</dd>
	<dt><strong>Modify</strong> images using Javascript</dt>
  	<dd>
  		<code>cvi_edge.modify(<tt>image</tt>, <tt>options</tt>);</code><br>
  		<small>If the image has already an effect but a <tt>option</tt> value has changed, the effect will be changed accordingly.</small><br>
		<dl><dt>Examples:</dt>
		<dd>
			<code>cvi_edge.modify(document.getElementById(<b>"myimg"</b>), { <tt>size</tt>: <b>50</b>, <tt>inbuilt</tt>: <b>true</b> });</code>
			<code>cvi_edge.modify(document.getElementById(<b>"myimg"</b>), { <tt>inbuilt</tt>: <b>true</b>, <tt>type</tt>: <b>'radial'</b> });</code>
  		</dd></dl>
		<p></p>
  	</dd>
	<dt><strong>Remove</strong> effect from an image using Javascript</dt>
	<dd>
		<code>cvi_edge.remove(<tt>image</tt>);</code>
  		<p></p>
	</dd>
</dl>

<h2>Support libs</h2>
<p>If you are using the more flexible "<b>cvi_edge_lib.js</b>" instead of "<b>edge.js</b>", 
you'll get access to additional features by the following support libraries <em>(part of distribution)</em>:</p>
<ul>
<li><b>cvi_filter_lib.js</b> supports image filtering capabilities. <small>[<i><a class="lk" title="Filter capability WYSIWYG-Editor" href="http://lab.netzgesta.de/">WYSIWYG-Editor</a></i>]</small><br />
<small><i>Provides image filter capability for Canvas (only if getImageData/setImageData is supported)</i></small>.<br />
<br />
<code>filter : [{<tt>#1 filter options</tt>},{<tt>#2 filter options</tt>}...];</code>
<dt><code><tt>options</tt> &nbsp; e.g. {<b>f</b>: '<tt>contrast</tt>', <b>s</b>: <tt>1.5</tt>, ...}</code></dt>
<dd>
	<code><b>f</b> == STRING <b>filter name</b> e.g. "invert" Default: <tt>null</tt> <em>(required)</em><pre>
     "<tt>invert</tt>" Reverses all colors of the image
     "<tt>invertalpha</tt>" Reverses the transparency of the image
     "<tt>grayscale</tt>" Converts the image into grayscale
     "<tt>solarize</tt>" Solarizes the image by negating the colors
     "<tt>sepia</tt>" Applies the well-known sepia coloring to the image
     "<tt>threshold</tt>" Converts the image to black&white (s<1 == darker and s>1 == brighter)
     "<tt>posterize</tt>" Posterizes the image by quantizing each channel to a limited number of levels
     "<tt>tritone</tt>" Applies 3 colors for low|mid|high range according to the brightness of the image
     "<tt>mixrgb</tt>" Mixes the RGB channels with the other two channels
     "<tt>exposure</tt>" Simulates changing the exposure of the image
     "<tt>gamma</tt>" Standard gamma correction (s<1 == darker and s>1 == brighter)
     "<tt>brightness</tt>" Change brightness (s<1 == darker and s>1 == brighter)
     "<tt>contrast</tt>" Change contrast (s<1 == lower and s>1 == higher)
     "<tt>adjustrgba</tt>" Adjust the red & green & blue & alpha channel of the image (s == [r,g,b,a])
     "<tt>adjusthsba</tt>" Adjust hue & saturation & brightness & alpha channel of the image (s == [h,s,b,a])
     "<tt>adjustyuva</tt>" Adjust luminance & blue–yellow chrominance & red–cyan chrominance & alpha channel of the image (s == [y,u,v,a])
     "<tt>colorkey</tt>" Set alpha to 0 if pixel color values are higher than min and lower than max rgb color
     "<tt>chromakey</tt>" Set alpha to 0 if pixel hue & saturation & brightness matches
     "<tt>smooth</tt>" Smoothes the image (result is similar to bluring)
     "<tt>spinblur</tt>" Blurs by rotating the centered image
     "<tt>zoomblur</tt>" Blurs by zooming the centered image
     "<tt>motionblur</tt>" Blurs by moving the image to a defined direction
     "<tt>outline</tt>" Creates grayscaled outline images by different operators (e.g. sobel, prewitt...).
     "<tt>convolve</tt>" Use your own 3x3 matrix via option m=[[n,n,n],[n,n,n],[n,n,n]]
     "<tt>blur</tt>" Bluring the image by (in build and extendable cvi_matrix object) convolution
     "<tt>median</tt>" Smoothes grainy images by (in build and extendable cvi_matrix object) convolution
     "<tt>sharpen</tt>" Makes image sharper by (in build and extendable cvi_matrix object) convolution
     "<tt>sharper</tt>" Makes image even sharper by (in build and extendable cvi_matrix object) convolution
     "<tt>bumplt</tt>" Embosses the image by (in build and extendable cvi_matrix object) convolution
     "<tt>bumpbr</tt>" ... </pre></code>
	<code><b>s</b> == FLOAT/OBJECT <b>multiplier(s)</b>  e.g. 0-255 Defaults to... <em>(optional)</em> </tt><pre>
     <tt>1        </tt> if f=="<tt>zoomblur</tt>|<tt>spinblur</tt>" Distance (px)
     <tt>1        </tt> if f=="<tt>smooth</tt>" Radius (px 1-10)
     <tt>1        </tt> if f=="<tt>posterize</tt>" Number of levels (1-16)
     <tt>1        </tt> if f=="<tt>threshold</tt>" Multiplier of 127 (0-2)
     <tt>1        </tt> if f=="<tt>brightness</tt>|<tt>contrast</tt>|<tt>gamma</tt>|<tt>exposure</tt>" Multiplier of existing value (0-255)
     <tt>[1,0]    </tt> if f=="<tt>motionblur</tt>" Distance (px) and angle (0-360)
     <tt>[auto,0] </tt> if f=="<tt>convolve</tt>" or m!=null. Divisor of convolution result (-1==auto), 
               useable for normalization and bias (0-255) for brightness addition
     <tt>[1,0,    </tt> if f=="<tt>outline</tt>" Divisor of convolution result, bias (0-255) 
     <tt>  'name']</tt> and operator ('sobel'|'scharr'|'prewitt'|'kirsh'|'roberts') 
     <tt>[1,1,1,1]</tt> if f=="<tt>adjustrgba</tt>" red, green, blue, alpha. Multipliers of existing values (0-255)
     <tt>[1,1,1,1]</tt> if f=="<tt>adjusthsba</tt>" hue, saturation, brightness, alpha. Multiply existing values (0-255)
     <tt>[1,1,1,1]</tt> if f=="<tt>adjustyuva</tt>" luminance, blue–yellow chrominance, red–cyan chrominance, alpha. Multiply existing values (0-255)
     <tt>[0,0,0,0,0]</tt>  f=="<tt>chromakey</tt>" hue (0-360) and hue tolerance, min saturation, min brightness, max brightness (0-100)
     <tt>[[0,0,0],</tt> if f=="<tt>colorkey</tt>" equals rgb min and rgb max triplet (0-255)
     <tt> [0,0,0]]</tt> 
     <tt>[[1,1,1],</tt> if f=="<tt>mixrgb</tt>" Mix into r, g, b with...
     <tt> [1,1,1]]</tt> ...bluegreen, redblue, greenred as triplets [0-255,0-255,0-255]
     <tt>[[0,0,0],</tt> if f=="<tt>tritone</tt>" low|mid|high range colors as...
     <tt> [0,0,0],</tt> ...rgb triplets [0-255,0-255,0-255]
     <tt> [0,0,0]]</tt> </pre></code>
	<code><b>m</b> == OBJECT <b>kernel matrix</b>  e.g. [[n,n,n],[n,n,n],[n,n,n]] Default: <tt>null</tt> <em>(optional)</em> </code><br />
</dd>
<p><br/></p>
</li>
<li><b>cvi_istack_lib.js</b> supports image stack capabilities. <small>[<i><a class="overlay lWOn lk" title="istack Example-Demo" href="istack.html">Example-Demo</a></i>]</small><br />
<small><i>Provides fading image stacks for Images and CVI Effects</i></small>.

<dl>
	<dt>Set defaults</dt>
  	<dd>
		<code>cvi_istack.<b>defaultImagearray</b>&nbsp;= <tt>null</tt>; //OBJ e.g.  [{source:'image.jpg'}]</code><br />
		<code>cvi_istack.<b>defaultMainwidth</b>&nbsp; = <tt>128</tt>; //INT 80-n (px width) </code><br />
		<code>cvi_istack.<b>defaultMainheight</b> = <tt>128</tt>; //INT 80-n (px height)</code><br />
		<code>cvi_istack.<b>defaultPlayframes</b> = <tt>20</tt>; //INT 1-100 equals frames to fade (* 30 milliseconds)</code><br />
		<code>cvi_istack.<b>defaultPlaydelay</b>&nbsp; = <tt>5000</tt>; //INT 1000-n equals milliseconds (1/1000)</code><br />
		<code>cvi_istack.<b>defaultLoadtimeout</b>= <tt>3000</tt>;	//INT 1000-n equals milliseconds (1/1000)</code><br />
		<code>cvi_istack.<b>defaultNoiefade</b> &nbsp; = <tt>false</tt>;//BOOLEAN IE's Alpha filter produces rough edges</code><br />
		<code>cvi_istack.<b>defaultPlayscript</b> = <tt>''</tt>; //STRING e.g. 'cvi_bevel'|'cvi_corner'|'cvi_curl'|'cvi_edge'|'cvi_glossy'|<br />
		'cvi_glossy'|'cvi_reflex'|'cvi_slide'|'cvi_sphere'|'cvi_strip'</code><br />
  		<p></p>
		<em><small><b>imagearray</b> supports <tt>source</tt> <em>(required)</em> and <tt>options</tt> <em>(optional)</em>.</small></em>
  		<p></p>
	</dd>
	<dt>Add stack</dt>
  	<dd>
  		<code>cvi_istack.add(<tt>element</tt>, <tt>options</tt>);</code><br />
		<dl><dt><code><tt>element</tt>&nbsp; == div element</code></dt></dl>
		<dl><dt><code><tt>options</tt> &nbsp;e.g. {<b>mainwidth</b>: <tt>128</tt>, <b>mainheight</b>: <tt>128</tt>, ...}</code></dt>
		<dd>
			<code><b>imagearray</b>&nbsp;== OBJ Default: <tt>null</tt></code><br />
			<code><b>mainwidth</b>&nbsp; == INT <tt>32</tt> - <tt>n</tt> Default: <tt>128</tt></code><br />
			<code><b>mainheight</b> == INT <tt>32</tt> - <tt>n</tt> Default: <tt>128</tt></code><br />
			<code><b>playframes</b> == INT <tt>1</tt> - <tt>100</tt> Default: <tt>20</tt></code><br />
			<code><b>playdelay</b>&nbsp; == INT <tt>1000</tt> - <tt>n</tt> Default: <tt>5000</tt></code><br />
			<code><b>loadtimeout</b>== INT <tt>1000</tt> - <tt>n</tt> Default: <tt>3000</tt></code><br />
			<code><b>noiefade</b> &nbsp; == BOL <tt>true</tt> or <tt>false</tt> Default: <tt>false</tt></code><br />
			<code><b>playscript</b> == STR Default: <tt>''</tt></code><br />
  		</dd></dl>
		<dl><dt><em><small><b>Advices:</b> All images should have the same aspect ratio like the stack object.<br />
		cvi_slide and cvi_strip creates generally 1:1 objects (using the larger dimension),<br />
		cvi_sphere creates generally 1:1 objects (using the smaller dimension) and<br />
		cvi_reflex creates objects with additional height (for the reflection).</small></em><br />
		<em><small><b>Hint:</b> By adding a stack to a div element, the former content of the element will be overwritten.</small></em></dt></dl>
  		<p></p>
  	</dd>
	<dt>Get some informations</dt>
	<dd>
		<code><tt>FLOAT</tt> &nbsp;= cvi_istack.version;</code><br />
		<code><tt>STRING</tt> = cvi_istack.released;</code>
  		<p></p>
	</dd>
	<dt>Play stack</dt>
	<dd>
		<code>cvi_istack.play(<tt>element</tt>);</code>
  		<p></p>
	</dd>
	<dt>Pause stack</dt>
	<dd>
		<code>cvi_istack.pause(<tt>element</tt>);</code>
  		<p></p>
	</dd>
	<dt>Remove stack</dt>
	<dd>
		<code>cvi_istack.remove(<tt>element</tt>);</code>
  		<p></p>
	</dd>
	<dt>Example</dt>
	<dd>
  		<pre>
&lt;script type="text/javascript"&gt;
&lt;!--
	var photos = new Array();
	photos = [
		{source:'images/fire.jpg', options:'{tilt:"l",text:"fire"}' },
		{source:'images/jeans.jpg', options:'{tilt:"r",text:"jeans"}' },
		{source:'images/rose.jpg', options:'{tilt:"l",text:"rose"}' },
		{source:'images/swirl.jpg', options:'{tilt:"r",text:"swirl"}' },
		{source:'images/fruits.jpg', options:'{tilt:"l",text:"fruits"}' },
		{source:'images/heart.jpg' }
	];
	
	function init_ImageStack() {
		cvi_glossy.defaultPreserve=true;
		cvi_glossy.defaultTilt='left';
		cvi_glossy.defaultFontattr= [100,100,100];
		cvi_istack.add(document.getElementById('wrapper_div'),{
			imagearray: photos,
			mainwidth: 200,
			mainheight: 200,
			playdelay: 3000,
			playscript: 'cvi_glossy',
			noiefade: true
		});
	}
	
	if(window.attachEvent) {
		window.attachEvent("onload", init_ImageStack);
	}else {
		window.addEventListener("load", init_ImageStack, false);
	}
--&gt;
&lt;/script&gt;
  		</pre>
	</dd>
</dl>
</li>
</ul>

<h2>Why use Javascript Image Masks?</h2>

<ul>
<li>Fast and easy to implement. Just add class="edges" to the image and your good to go.</li>
<li>Don't need to spend time in an image editor creating an image effect.</li>
<li>Works really well with forum avatars. Doesn't require additional server work.</li>
<li>It's dead easy to change the attributes of the images.</li>
<li>Free of charge use on non-commercial and private web sites.</li>
</ul>
<p>In older browsers, the script degrades and your visitors won't notice a thing.</p>

<h2>Restrictions</h2>

<p>Opera do not support printing of canvas.</p>

<h2>History</h2>

Version 1.4<ul><li>Extended distribution. Added the support libs "<b>cvi_filter_lib.js</b>" and "<b>cvi_istack_lib.js</b>"</li></ul>
Version 1.3<ul><li>Added masking support for Internet Explorer 6 (<em>GIF only</em>)</li><li>Added two more inbuilt masks (linear/radial) for <b>cvi_edge_lib.js</b></li></ul>
Version 1.2<ul><li>Added scriptable lib version <b>cvi_edge_lib.js</b></li></ul>
Version 1.1<ul><li>Advanced IE6/7 support</li></ul>
Version 1.0<ul><li>Initial Release</li><li>Added support for Internet Explorer 6/7<br>(<tt>imask</tt> and <tt>isize</tt> is still missing)</li></ul>

<h2>License</h2>

<p>edge.js, and cvi_edge_lib.js are distributed under this <a href="LICENSE.txt">LICENSE</a>. License permits free of charge use on non-commercial and private web sites only under special conditions <em>(as described in the license)</em>. This license equals neither "<span style="text-decoration: line-through;">open source</span>" nor "<span style="text-decoration: line-through;">public domain</span>". There are also <a href="&#109;&#097;&#105;&#108;&#116;&#111;:&#099;&#118;&#105;&#064;&#110;&#101;&#116;&#122;&#103;&#101;&#115;&#116;&#097;&#046;&#100;&#101;">Commercial Software Licenses</a> available.</p>

<h6>YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
<br>IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.</h6>

<p><strong>Images used are copyrighted and are used for demonstration only.</strong></p>

<p><a href="http://cvi.netzgesta.de/">cvi.netzgesta.de</a>&nbsp;&nbsp;also visit&nbsp;&nbsp;<a href="http://lab.netzgesta.de/">CVI-lab</a>, <a href="http://dev.netzgesta.de/">CVI-dev</a>, <a href="http://s5.netzgesta.de/">S5 Reloaded</a> and <a href="http://ajaxfilmdb.sourceforge.net/">AJAX-FilmDB</a></p>

</body>
</html>